<template>
  <!-- 容器div，包含上传组件和图片展示区块 -->
  <div>
    <!-- 上传区域 -->
    <div class="uploadImg">
      <!-- Element UI上传组件，使用自定义请求处理上传 -->
      <el-upload 
        action="#" 
        :http-request="customRequest" 
        class="upload-demo" 
        ref="upload" 
        :file-list="fileList"
        :on-success="uploadSuccess" 
        :auto-upload="false">
        <!-- 选择文件按钮 -->
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <!-- 触发上传到服务器的按钮 -->
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <!-- 上传提示信息 -->
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div>
    <!-- 图片展示区块 -->
    <div class="block">
      <!-- 使用v-for循环展示图片列表 -->
      <div class="img" v-for="img in imgList" :key="img.id">
        <!-- Element UI图片组件，展示图片 -->
        <el-image style="width:200px" :key="img.id" :src="`http://localhost:9000/${img.name}`"></el-image> 
        <!-- 删除按钮，点击时调用delImg方法 -->
        <el-button @click="delImg(img.id)" class="del" type="danger" icon="el-icon-delete" circle></el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index', // 组件名称
  components: {
    // 如果有子组件，在这里注册
  },
  mixins: [],
  props: {},
  data() {
    return {
      imgList: [], // 存储图片列表
      fileList: [] // 存储上传的文件列表
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.getSwiper() // 组件挂载后获取图片列表
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit() // 提交上传
    },
    customRequest(params) {
      const userinfo = JSON.parse(localStorage.getItem('userinfo')) // 获取用户信息
      const fd = new FormData() // 创建FormData对象
      fd.append('id', userinfo.id) // 添加用户id
      fd.append('carousel', params.file) // 添加文件

      this.$http.post('carousel/backend/add', fd, { // 发送POST请求
        headers: {
          'Content-Type': 'multipart/form-data' // 设置请求头
        }
      }).then(res => {
        if (res.data.code === 1) {
          this.$message(res.data.message) // 显示成功消息
          this.getSwiper() // 重新获取图片列表
        } else {
          this.$message('操作失败') // 显示失败消息
        }
      })
    },
    uploadSuccess(res) {
      this.getSwiper() // 上传成功后重新获取图片列表
    },
    getSwiper() {
      this.$http.get('/carousel/list').then(res => { // 获取图片列表
        if (res.data.code === 1) {
          this.imgList = res.data.list // 将获取的图片列表赋值给imgList
        }
      })
    },
    delImg(imgId) {
      const userinfo = JSON.parse(localStorage.getItem('userinfo')) // 获取用户信息
      this.$http.post('carousel/backend/remove', { id: userinfo.id, imgId: imgId }).then(res => { // 发送POST请求删除图片
        if (res.data.code === 1) {
          this.$message(res.data.message) // 显示成功消息
          this.getSwiper() // 重新获取图片列表
        } else {
          this.$message('操作失败') // 显示失败消息
        }
      })
    }
  }
};
</script>
<style scoped>
/* 基础布局样式 */
.uploadImg, .block {
  margin: 24px;
  padding: 24px;
}

.block {
  width: calc(100% - 48px); /* 减去padding的宽度 */
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* 上传组件样式 */
.uploadImg {
  background-color: #f9f9f9;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  /* 移除了margin，因为.block已经包含了外边距 */
  padding: 10px;
  /* 添加box-shadow增加层次感 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 按钮样式 */
.el-button {
  border-radius: 20px;
  font-weight: 500;
  margin-right: 10px; /* 按钮之间的间距 */
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.el-button--success {
  background-color: #67c23a;
  border-color: #67c23a;
}

/* 上传提示样式 */
.el-upload__tip {
  color: #606266;
  font-size: 14px;
  margin-top: 8px; /* 与上传按钮的间距 */
}

/* 图片样式 */
.img {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  margin: 4px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.img:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 删除按钮样式 */
.del {
  position: absolute;
  bottom: 10px; /* 调整位置 */
  right: 10px; /* 调整位置 */
  background-color: rgba(255, 66, 66, 0.8);
  color: white;
  transition: background-color 0.3s;
}

.del:hover {
  background-color: #ff4242;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .img {
    width: calc(50% - 8px); /* 减去.img的外边距 */
  }
}

/* 图片组件样式 */
.el-image {
  width: 100%; /* 使图片宽度适应容器 */
  display: block; /* 移除img的默认间距 */
  border-radius: 4px;
}
</style>